<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <div class="shangfanganniu"><van-icon name="revoke" size="25" color="#1989fa" @click="$router.go(-1)" /></div>
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad">
      <van-cell v-for="(item,index) in list" :key="index">
        <van-image slot="icon"
                   round
                   width="30"
                   height="30"
                   style="margin-right: 10px;"
                   :src="imgP" />
        <span style="color: #466b9d;" slot="title">{{item.name}}</span>
        <div slot="label">
          <p style="color: #363636;">{{item.msg}}</p>
          <p>
            <span style="margin-right: 10px;">3天前</span>
            <van-button size="mini" type="default">回复</van-button>
          </p>
        </div>
        <van-icon slot="right-icon" name="like-o" />
      </van-cell>
    </van-list>
    <!-- 评论列表 -->
    <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field v-model="msge" clearable placeholder="请输入评论内容">
        <van-button slot="button" size="mini" type="info" @click="sharemind">发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发布评论 -->
  </div>
</template>

<script>
import { Toast } from 'vant'
import { randomEng } from '@/static/randomEng'
export default {
  name: 'ArticleComment',
  data () {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      imgP: require('@/assets/user.jpg'),
      msge: ''
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          var user = {
            name: randomEng(),
            msg: randomEng()
          }
          this.list.push(user)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 20) {
          this.finished = true
        }
      }, 500)
    },
    sharemind () {
      if (this.msge.length > 0) {
        var user = {
          name: 'damo',
          msg: this.msge
        }
        this.list.unshift(user)
        Toast.success('发布成功')
        this.msge = ''
      } else {
        Toast.fail('请输入内容')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
  .shangfanganniu {
    position: fixed;
    top: 20px;
    width: 100px;
    height: 60px;
    right: 0;
    z-index:999;
  }
  .article-comments{
      padding-bottom:50px;
  }
</style>
